<template>
    <view class="withdrawals-setting">
        <view class="withdrawals-header u-flex u-row-between">
            <view class="">
                <view class="u-p-b-30">分销佣金</view>
                <view class="price u-p-b-20">{{ applyWithdrawalsForm.can_rebate | unitPrice }} 元</view>
            </view>
            <view class="withdrawals-btn u-m-r-20" @click="handleHistory">
                <text class="btn">提现明细</text>
            </view>
        </view>
        <view class="withdrawals-cont u-flex u-row-between">
            <view class="">
                可提现佣金
            </view>
            <view class="">
                {{ applyWithdrawalsForm.can_rebate | unitPrice }} 元
            </view>
        </view>
        <view class="withdrawals-cont">
            <view class="u-flex u-row-between u-p-b-40">
                <view class="">
                    已提现佣金
                </view>
                <view class="">
                    {{ withdrawnPrice | unitPrice }} 元
                </view>
            </view>
            <u-line></u-line>
            <view class="u-flex u-row-between u-p-t-40">
                <view class="">
                    待打款佣金
                </view>
                <view class="">
                    {{ cashWithdrawnPrice | unitPrice }} 元
                </view>
            </view>
        </view>
        <view class="withdrawals-cont">
            <view class="">
                <view class="">
                    提现金额
                </view>
                <view class="u-flex">
                    ￥<u-input style="width: 100%;" v-model="applyWithdrawalsForm.apply_money" placeholder="请输入提现金额" type="number"></u-input>
                </view>
            </view>
            <view class="">
                <view class="u-m-t-20 u-m-b-20">
                    提现备注
                </view>
                <view class="">
                    <u-input v-model="applyWithdrawalsForm.remark" placeholder="请输入提现备注" type="textarea" :border="true"></u-input>
                </view>
            </view>
        </view>
        <view class="withdrawals-cont" @click="handleSetting">
            <view class="u-flex u-row-between">
                <view class="">
                    提现设置
                </view>
                <view class="">
                    <u-icon name="arrow-right"></u-icon>
                </view>
            </view>
        </view>
        <view class="withdrawals-cont" @click="tipShow = !tipShow">
            <view class="u-flex u-row-between">
                <view class="">
                    用户须知
                </view>
                <view class="">
                    <u-icon :name="tipShow ? 'arrow-down' : 'arrow-right'"></u-icon>
                </view>
            </view>
            <view class="tips" v-if="tipShow">
                <view>1.买家确认收货后，佣金才可提现。结算期内，买家如果退货，佣金将自动扣除；</view>
                <view>2.可用佣金大于0元才可以申请提现。</view>
            </view>
        </view>
        <view class="big-btn" @click="handleApplyWithdrawals">
            <view class="btn">
                <text>申请提现</text>
            </view>
        </view>
    </view>
</template>

<script>
    import * as API_Distribution from '@/api/distribution.js'
    import { RegExp } from '@/ui-utils/index.js'
    export default {
        data() {
          return {
              /** 申请表单 */
              applyWithdrawalsForm: {
                  /** 可提现金额 */
                  can_rebate: 0,
                  /** 提现金额 */
                  apply_money: 0,
                  /** 备注 */
                  remark: ''
              },
              tipShow: false, //用户须知提示
              cashWithdrawnPrice: 0, //提现中金额
              withdrawnPrice: 0, //成功提现金额
          };
        },
        onLoad() {
            this.getWithdrawalsCanRebate()
        },
        methods: {
            //提现明细
            handleHistory() {
                uni.navigateTo({ url:"/mine-module/distribution/withdrawals-history" })
            },
            //提现设置
            handleSetting() {
                uni.navigateTo({ url:"/mine-module/distribution/withdrawals-setting" })
            },
            /** 获取可提现金额 */
            async getWithdrawalsCanRebate() {
                const withdrawalsCanRebate = await API_Distribution.getWithdrawalsCanRebate()
                this.applyWithdrawalsForm.can_rebate = withdrawalsCanRebate.message
                const withdrawals = await API_Distribution.getWithdrawalsList({page_size: 1000})
                // 初始化金额
                this.cashWithdrawnPrice = 0
                this.withdrawnPrice = 0
                withdrawals.data && withdrawals.data.forEach(item => {
                    // 获取提现中的金额
                    if(item.status === 'APPLY') {
                        this.cashWithdrawnPrice += item.apply_money
                    }
                    // 获取已提现的金额
                    if(item.status === 'TRANSFER_ACCOUNTS') {
                        this.withdrawnPrice += item.apply_money
                    }
                })
            },
            /** 申请提现 */
            handleApplyWithdrawals() {
                const { apply_money, can_rebate, remark } = this.applyWithdrawalsForm
                console.log('apply_money', apply_money)
                if (!apply_money) {
                    this.$u.toast('提现金额不能为空或0')
                    return
                } else if (parseInt(apply_money) < 1) {
                    this.$u.toast('提现金额最少1元')
                    return
                } else if (parseFloat(apply_money) > parseFloat(can_rebate)) {
                    this.$u.toast('已超可提现金额')
                    return
                }
                const params = {
                    apply_money: apply_money,
                    remark: remark
                }

                API_Distribution.applyWithdrawals(params).then(() => {
                    this.getWithdrawalsCanRebate()
                    this.applyWithdrawalsForm.apply_money = 0
                    this.applyWithdrawalsForm.remark = ''
                    this.$u.toast('已提交申请，请耐心等待。。。')
                })
            }
        }
	}
</script>

<style lang="scss" scoped>
    .withdrawals-header {
        color: #FFFFFF;
        background: linear-gradient(145deg,#ff9000,#ff5000 77%);
        padding: 30rpx;
        .price {
            font-size: 36rpx;
            font-weight: 600;
        }
        .withdrawals-btn {
            .btn {
                border: 2rpx solid #FFFFFF;
                border-radius: 40rpx;
                padding: 10rpx 30rpx;
            }
        }
    }
    .withdrawals-cont {
        background-color: #FFFFFF;
        border-radius: 20rpx;
        margin: 20rpx;
        padding: 40rpx 30rpx;
        /deep/.u-input {
            margin-left: 20rpx;
            border-bottom: 2rpx solid #DCDFE6;
        }
        .tips {
            margin-top: 20rpx;
            padding-top: 20rpx;
            display: block;
            border-top: 2rpx solid #e4e7ed;
        }
    }
</style>
